<template>
	<div>
		<ArrowScroll style="margin:20px" :style="{width:width*10+'px'}">
			<Button v-for="i in count" :key="i" style="margin:0 10px">按钮{{i}}</Button>
			<Tippy
				closable
				width="300"
				height="250"
				title="标题">
				<button>按钮</button>
				<template #content>
					<div style="white-space:pre">
						<p>测试内容测试内容</p>
						<p>测试内容测试内容</p>
						<p>测试内容测试内容</p>
						<p>测试内容测试内容</p>
						<p>测试内容测试内容</p>
						<p>测试内容测试内容</p>
						<p>测试内容测试内容</p>
						<p>测试内容测试内容</p>
						<p>测试内容测试内容</p>
						<p>测试内容测试内容</p>
						<p>测试内容测试内容</p>
						<p>测试内容测试内容</p>
						<p>测试内容测试内容</p>
						<p>测试内容测试内容</p>
						<p>测试内容测试内容</p>
						<p>测试内容测试内容</p>
					</div>
				</template>
			</Tippy>
		</ArrowScroll>
		宽度:<NumberInput v-model="width" style="margin:20px"/>
		数量:<NumberInput v-model="count" style="margin:20px"/>
	</div>
</template>

<script>
import ArrowScroll from '@/components/pc/arrow-scroll';
import Button from '@/components/pc/button';
import NumberInput from '@/components/pc/number-input';
import Tippy from '@/components/pc/tippy';
export default {
	name:'index',
	components:{
		ArrowScroll,
		Button,
		NumberInput,
		Tippy,
	},
	data(){
		return {
			count:5,
			width:40,
		};
	},
	methods:{
	}
};
</script>

<style lang="scss">

</style>
